<template>
	<div>
		<div v-if="personalInfo">
			<table>
				<tr>
					<td>
						<van-image style="margin: 2vh;" @click="openUserDetailPage" width="20vw" height="20vw"
							fit="cover" :src="user.headImgUrl" round />
					</td>
					<td>
						<div @click="openUserPage">
							<h4>{{user.username}}</h4>
							<span style="min-width: 50vw;">手机号：{{user.phoneNumber}}</span> <br />
						</div>
					</td>
				</tr>
			</table>
		</div>
		<div class="user-list">
			<div @click="myBlogShow=true">
				<p>帖子<br />{{blogCount}}</p>
			</div>
			<div @click="fanListShow=true">
				<p>粉丝<br />{{fansCount}}</p>
			</div>
			<div @click="subscribeListShow=true">
				<p>关注<br />{{subcribeCount}}</p>
			</div>
			<div @click="myGoodsShow=true">
				<p>闲置<br />{{goodsCount}}</p>
			</div>
		</div>
		
		<div style="margin-top: 1rem;">
			<van-cell @click="openMyWalletPage" is-link title="我的钱包" icon="credit-pay" />
			<van-cell @click="goodOrdersListShow=true" is-link title="我购买的" icon="shopping-cart-o" />
			<van-cell @click="soldGoodShow=true" is-link title="已售出的" icon="logistics" />
			<van-cell @click="myOfferShow=true" is-link title="我的请求" icon="records" />
			<!-- <van-cell @click="myOfferOrderShow=true" is-link title="请求订单" icon="records" /> -->
			<van-cell @click="offerAcceptedShow=true" is-link title="已接请求" icon="completed" />
		</div>
		
		<!-- 提前加载字体 -->
		<div style="visibility: hidden;">
			<div style="font-family:'SourceHanSans-Bold'">
				&nbsp;
			</div>
			<div style="font-family:'SourceHanSans'">
				&nbsp;
			</div>
		</div>

		
		<van-popup v-model:show="userLoginPage" position="right" :style="{ width: '100%', height: '100%' }"
			close-icon="arrow-left" close-icon-position="top-left">
			<LoginPage :close="closeUserLoginPage"></LoginPage>
		</van-popup>
		<van-popup v-model:show="editInfoPage" position="right" :style="{ width: '100%', height: '100%' }" closeable
			close-icon="arrow-left" close-icon-position="top-left">
			<EditPersonalInfoPage :logoutAndLogin="openLogin" :userData='userData' :logoutEvent='logoutEvent'
				:close='closeEditPersonalInfoPage'>
			</EditPersonalInfoPage>
		</van-popup>
		<van-popup v-model:show="userPageShow" position="right" :style="{ width: '100%', height: '100%' }" closeable
			close-icon="arrow-left" close-icon-position="top-left">
			<UserHomePage :uid='userData.id'></UserHomePage>
		</van-popup>
		<van-popup v-model:show="myOfferOrderShow" position="right" :style="{ width: '100%', height: '100%' }" closeable
			close-icon="arrow-left" close-icon-position="top-left">
			<MyOfferOrder></MyOfferOrder>
		</van-popup>
		<van-popup v-model:show="myOfferShow" position="right" :style="{ width: '100%', height: '100%' }" closeable
			close-icon="arrow-left" close-icon-position="top-left">
			<MyOffer></MyOffer>
		</van-popup>
		<van-popup v-model:show="myWalletPageShow" position="right" :style="{ width: '100%', height: '100%' }" closeable
			close-icon="arrow-left" close-icon-position="top-left">
			<MyWallet :user="userData" ref="myWallet"></MyWallet>
		</van-popup>
		<van-popup v-model:show="offerAcceptedShow" position="right" :style="{ width: '100%', height: '100%' }" closeable
			close-icon="arrow-left" close-icon-position="top-left">
			<OfferAccepted :uid="userData.id"></OfferAccepted>
		</van-popup>
		<van-popup v-model:show="fanListShow" position="right" :style="{ width: '100%', height: '100%' }" closeable
			close-icon="arrow-left" close-icon-position="top-left">
			<FansList :uid="userData.id"></FansList>
		</van-popup>
		<van-popup v-model:show="subscribeListShow" position="right" :style="{ width: '100%', height: '100%' }" closeable
			close-icon="arrow-left" close-icon-position="top-left">
			<SubscribeList :uid="userData.id"></SubscribeList>
		</van-popup>
		<van-popup v-model:show="myBlogShow" position="right" :style="{ width: '100%', height: '100%' }" closeable
			close-icon="arrow-left" close-icon-position="top-left">
			<MyBlog :uid="userData.id"></MyBlog>
		</van-popup>
		
		<van-popup v-model:show="myGoodsShow" position="right" :style="{ width: '100%', height: '100%' }" closeable
			close-icon="arrow-left" close-icon-position="top-left">
			<MyGoods></MyGoods>
		</van-popup>
		<van-popup v-model:show="goodOrdersListShow" position="right" :style="{ width: '100%', height: '100%' }" closeable
			close-icon="arrow-left" close-icon-position="top-left">
			<GoodOrdersList :uid="userData.id"></GoodOrdersList>
		</van-popup>
		<van-popup v-model:show="soldGoodShow" position="right" :style="{ width: '100%', height: '100%' }" closeable
			close-icon="arrow-left" close-icon-position="top-left">
			<SoldGoodOrder :uid="userData.id"></SoldGoodOrder>
		</van-popup>
		
		
	</div>

</template>

<script>
	import {
		ref
	} from 'vue';
	import LoginPage from './LoginPage.vue';
	import url from '@/assets/url.json';
	import EditPersonalInfoPage from './EditPersonalInfoPage.vue';
	import UserHomePage from './UserHomePage.vue';

	import MyOfferOrder from './personal/MyOfferOrder.vue';
	import MyOffer from './personal/MyOffer.vue';
	import MyWallet from './personal/MyWallet.vue';
	import OfferAccepted from './personal/AcceptedOffer.vue';
	import FansList from './personal/FansList.vue';
	import SubscribeList from './personal/SubscribeList.vue';
	import MyBlog from './personal/MyBlog.vue';
	import MyGoods from './personal/MyGoods.vue';
	import GoodOrdersList from './personal/GoodOrdersList.vue';
	import SoldGoodOrder from './personal/SoldGoodOrder.vue';
	
	import {
		showNotify
	} from 'vant';

	export default {
		data() {
			return {
				userLoginPage: false,
				editInfoPage: false,
				personalInfo: true,
				user: {
					logon: false,
					username: '未登录',
					phoneNumber: '',
					fansCount: 0,
					subcribeCount: 0,
					headImgUrl: ''
				},
				userData: {},
				// 主页数据
				fansCount: 0,
				blogCount: 0,
				subcribeCount: 0,
				goodsCount: 0,
				
				// 页面展示
				userPageShow: false,
				myOfferShow: false,
				myOfferOrderShow: false,
				myWalletPageShow: false,
				offerAcceptedShow: false,
				fanListShow: false,
				subscribeListShow: false,
				myBlogShow: false,
				myGoodsShow: false,
				goodOrdersListShow: false,
				soldGoodShow: false,
			}
		},
		setup() {
			const showuser = ref(false);
			const show = () => {
				showuser.value = true;
			};
			return {
				showuser,
				show
			};
		},
		components: {
			LoginPage,
			EditPersonalInfoPage,
			UserHomePage,
			MyOfferOrder,
			MyOffer,
			MyWallet,
			OfferAccepted,
			FansList,
			SubscribeList,
			MyBlog,
			MyGoods,
			GoodOrdersList,
			SoldGoodOrder
		},
		mounted() {
			if ((typeof this.$cookies.get('token')) !== 'undefined') {
				this.getUserMessage();
				
			}
		},
		methods: {
			flash() {
				let fansCount = ()=>{
					
					this.$axios({
						url: url.ip + '/api-user/home/fans/count?id=' + this.$cookies.get("userId"),
						method: 'GET',
						headers: {
							token: this.$cookies.get('token'),
						}
					}).then((res) => {
						if (res.data.code !== 0) {
							showNotify({
								type: 'danger',
								message: res.data.message
							});
						} else {
							this.fansCount = res.data.data
							
						}
					})
				}
				let subcribeCount = () =>{
					
					this.$axios({
						url: url.ip + '/api-user/home/subcribe/count?id=' + this.$cookies.get("userId"),
						method: 'GET',
						headers: {
							token: this.$cookies.get('token'),
						}
					}).then((res) => {
						if (res.data.code !== 0) {
							showNotify({
								type: 'danger',
								message: res.data.message
							});
						} else {
							this.subcribeCount = res.data.data
							
						}
					})
				}
				let blogCount = ()=>{
					
					this.$axios({
						url: url.ip + '/api-blog/blog/countById?id='+this.$cookies.get("userId"),
						method: 'GET',
						headers: {
							token: this.$cookies.get('token'),
						}
					}).then((res) => {
						if (res.data.code !== 0) {
							showNotify({
								type: 'danger',
								message: res.data.message
							});
						} else {
							this.blogCount = res.data.data
							
						}
					})
				}
				let goodsCount = () =>{
					
					this.$axios({
						url: url.ip + '/api-goods/goods/getGoodsByUid?id=' + this.$cookies.get("userId"),
						method: 'GET',
						headers: {
							token: this.$cookies.get('token'),
						}
					}).then((res) => {
						if (res.data.code !== 0) {
							showNotify({
								type: 'danger',
								message: res.data.message
							});
						} else {
							this.goodsCount = res.data.data.total
							
						}
					})
				}
				fansCount();
				subcribeCount();
				blogCount();
				goodsCount();

			},
			openLogin() {
				this.userLoginPage = true
			},
			openUserDetailPage() {
				if (this.user.logon === false) {
					this.userLoginPage = true;
				} else {
					this.editInfoPage = true;
				}
			},
			closeUserLoginPage() {
				this.getUserMessage();
				this.userLoginPage = false;
			},
			getUserMessage() {
				this.$axios({
					url: url.ip + '/api-user/user',
					method: 'GET',
					headers: {
						token: this.$cookies.get('token'),
					}
				}).then((res) => {
					if (res.data.code === 0) {
						this.$cookies.set('userId', res.data.data.id);
						this.showUserMessage(res.data.data);
						this.flash();
					} else {
						this.$cookies.remove('token');
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			showUserMessage(data) {
				this.personalInfo = false;
				console.log(data);
				this.userData = data;
				this.user.logon = true;
				this.user.username = data.userName;
				this.user.phoneNumber = data.phoneNumber;
				this.user.headImgUrl = url.ip + '/' + data.headImgSrc;
				this.personalInfo = true;
			},
			logoutEvent() {
				this.user = {
					logon: false,
					username: '未登录',
					phoneNumber: '',
					fansCount: 0,
					subcribeCount: 0,
					headImgUrl: ''
				}
				this.$cookies.remove('token');
			},
			closeEditPersonalInfoPage() {
				this.editInfoPage = false;

			},
			openUserPage() {
				this.userPageShow = true;
			},
			openMyWalletPage() {
				this.myWalletPageShow = true;
				if ((typeof this.$refs.myWallet) !== 'undefined') {
					this.$refs.myWallet.flashMoney();
				}
			}
			
		}
		
	};
</script>

<style>
	.user-data {
/* 		height: auto; */
		margin-left: 5%;

	}

	.user-list {
		width: 100%;
		height: 10vh;
		border-top: 1px solid #CDD0D6;
		text-align: center;
		margin-top: 2%;
	}

	.user-list div {
		display: inline-block;
		width: 20%;
		height: 80%;
		background-color: #F0F2F5;
		margin: 0 2%;
		border-radius: 20px;
		margin-top: 2%;
		box-shadow: 1px 1px 2px 1px pink;
	}

	.user-list div:hover {
		background-color: #F2F6FC;
	}

	.user-list div p {
		font-size: 1vh;
		text-align: center;
	}

	.user-btn {
		width: 5rem;

	}

	.user-more {
		width: 100%;
		height: 20vh;
		margin-top: 5vh;
		border-top: 1px solid #CDD0D6;
	}

	.user-more div {
		width: 25%;
		height: 9vh;
		display: inline-block;
		font-size: 1px;
		margin-top: 1vh;
	}

	.user-more div:hover {
		color: blue;
	}
</style>
